<template>
	<section>
		<div class="wrap">
			<Card class="card" v-if="message=='index'">
				欢迎您, 来到
				<a href="javascript:;">zcw博客.^_^</a><br/>
				<a href="javascript:;">→_→</a> 是否你也会在人潮拥挤的街头，寻寻觅觅，期盼相遇在夕阳斜斜的乌衣巷口
			</Card>
			<Card class="card" v-if="message=='search'">

				<span v-if="isShow">没有与 </span>
				<a href="javascript:;" class="keyword"> {{this.$route.query.val ||titleName}}</a>
				<span v-if="isShow">相关的文章 </span>
				<br/>
				<a href="javascript:;">→_→</a> 是否你也会在人潮拥挤的街头，寻寻觅觅，期盼相遇在夕阳斜斜的乌衣巷口
			</Card>

			<Card class='article card' v-for="(value,index) in indexContent">

				<Icon v-if="value.recommended==1" type="ios-pricetags" class='icon'></Icon>

				<Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" /> {{value.cname}}</span>
				<h2 v-if="$route.query.val" v-html="keyWrodsReplace($route.query.val,value.title)"> </h2>
				<h2 v-else v-html="value.title"> </h2>
				<Row>
					<Col span="8">
					<img :src="value.img" />
					</Col>
					<Col span="16">
					<p class="abstract">
						<span v-if="$route.query.val" v-html="keyWrodsReplace($route.query.val,value.excerpt)"></span>
						<span v-else v-html="value.excerpt"> </span>
					</p>
					<div class="content">
						<span v-if="$route.query.val" v-html="keyWrodsReplace($route.query.val,value.content)"></span>
						<span v-else v-html="value.content"> </span>
					</div>
					</Col>
				</Row>
				<p>编辑于 {{transformTime(value.add_time)}}
					<Button class="btn" @click="turnTo(value.aid)">阅读全文</Button>
				</p>

			</Card>
			<Page class="paging" :total="counts" :page-size="pageSize" @on-change="changePage" show-elevator></Page>

		</div>

	</section>
</template>

<script>
	import Server from '../server/server.js'
	export default {
		data() {
			return {
				message: 'index',
				indexContent: [],
				isShow: false,
				titleName: '',
				counts: 0,
				pageSize:0
			}
		},
		methods: {
			handleStart() {
				this.$Modal.info({
					title: 'Bravo',
					content: 'Now, enjoy the convenience of iView.'
				});
			},
			changePage(current) {
				this.getIndexContent(current);

			},
			turnTo(id) {
				this.$router.push({
					path: '/article',
					query: {
						aid: id
					}
				});

			},
			init() {
				if(this.$route.path == '/search') {
					this.message = 'search';
					this.getDatas('search');
					return;
				}
				this.getDatas();
			},
			getDatas(flag) {

				if(flag) {
					this.getSearchContent();
					return;
				}
				this.getIndexContent();				
			},
			getIndexContent(page) {
				Server.indexContents(page).then((data) => {
					if(!data.status) { //数据获取失败
						this.info(true, data.mes||'数据获取失败');
						return;
					}
					if(data.count=='0') { //无数据处理
						this.info(true, '内容为空!!');
						return;
					}
					console.log(data)
					this.indexContent = data.list; //数据赋值
					if(data.count) {
						this.counts = Number(data.count);
					}
		
					if(data.pageSize){
						this.pageSize=data.pageSize;
					}
				})
			},
			getSearchContent() {
				var isTid = false; //标签搜索
				const id = this.$route.query.val || this.$route.query.tid;
				if(this.$route.query.tid) {
					isTid = true;
				}
				if(!id) {
					return;
				}
				Server.searchContent(id, isTid).then((data) => {
					console.log(data)
					if(!data.status) { //无数据处理
						this.info(true, data.mes||'数据获取失败!');
						return;
					}
					if(data.count=='0') { //无数据处理
						this.isShow = true;
						this.info(true, '搜索内容为空!!');
						return;
					}
					
					this.indexContent = data.list; //数据赋值
					console.log(data)
					if(data.titleName) { //搜索的值 
						this.titleName = data.titleName;
					}
					if(data.count) { //文章条数
						this.counts =Number(data.count) ;
						
					}
					this.pageSize=4;
					if(data.pageSize){
						this.pageSize=data.pageSize;
					}
				})
			}
		},
		mounted() {
			this.init();
		},
		watch: {}
	}
</script>

<style scoped="scoped" lang="less">
	section {
		width: 100%;
		.paging {
			margin: -10px 0 30px 0;
			text-align: center;
		}
		.card {
			margin-bottom: 30px;
			.keyword {
				font-weight: 700;
				font-size: 20px;
			}
		}
		.wrap {
			width: 100%;
			min-width: 600px;
			float: right;
			margin: 0 20px 0 0;
			img {
				width: 80%;
				border-radius: 5px;
			}
		}
		 @media only screen and (max-width: 640px) {
		 			.wrap {
		 				width: 100% !important;
						min-width: 0;
						margin:0;
					}
		 }
		.article {
			h2 {
				margin-bottom: 8px;
			}
			.abstract {
				opacity: 0.6;
			}
			.btn {
				position: absolute;
				right: 20px;
				bottom: 4px;
			}
			.icon {
				position: absolute;
				top: -10px;
				right: 0px;
				font-size: 40px;
				color: #f4645f;
			}
		}
	}
</style>
<style type="text/css" scoped="scoped">
	.content {
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
</style>